import styles from "@styles/personal.module.less";
import GeekIcon from "@shared/geekIcon";
import { DatePicker } from "antd-mobile";
import dayjs from "dayjs";
import { useState } from "react";
import { useUpdateProfileMutation } from "@service/userEndpoints";
import toast from "react-hot-toast";

interface Props {
  birthday: string;
}

export default function Birthday({ birthday }: Props) {
  const [visible, setVisible] = useState(false);
  const [updateProfile] = useUpdateProfileMutation();
  return (
    <li>
      <span>生日</span>
      <div className={styles.value} onClick={() => setVisible(true)}>
        <span>{birthday}</span>
        <GeekIcon type="iconbtn_right" className={styles.icon} />
      </div>
      <DatePicker
        onClose={() => setVisible(false)}
        title={"请选择生日"}
        visible={visible}
        max={new Date()}
        min={new Date(1900, 0, 1, 0, 0, 0)}
        defaultValue={dayjs(birthday).toDate()}
        onConfirm={(date) => {
          updateProfile({ birthday: dayjs(date).format("YYYY-MM-DD") })
            .unwrap()
            .then(() => {
              toast.success("生日修改成功");
              setVisible(false);
            });
        }}
      />
    </li>
  );
}
